跳到主要内容

ES6+ Object.assign()

1. 前言

Object 对象的更新 把一个对象复制到另一个对象,在 ES5 中需要循环对象进行拷贝

2. 方法详情

2.1 基本语法

语法使用:

Object.assign(target, ...sources)

参数解释:

参数描述
target需要拷贝到的目标对象
sources源对象

2.2 拷贝对象

let target = {};
let source = {a: 1, b: 2, c: 3};
Object.assign(target, source);
target.d = 4;
console.log(target) // {a: 1, b: 2, c: 3, d: 4}
console.log(source) // {a: 1, b: 2, c: 3}

上面的代码可以看出,Object.assign () 的主要用法就是把源对象拷贝到指定的对象上去,目标对象的更改不会影响源对象。

2.3 合并对象

let target = {a: 1};
let source1 = {b: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target); // {a: 1, b: 2, c: 3}

上面的代码可以看出,Object.assign () 不会把目标对象清空,会合并后面所有的对象上的值。

2.4 覆盖前面的值

let target = {a: 1, b: 1};
let source1 = {b: 2, c: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target); // {a: 1, b: 2, c: 3}

如果后面的源对象上有相同的值,后面的源对象会覆盖前面对象上的值,这一点需要注意。

3. 浅拷贝

Object.assign() 的拷贝属于浅拷贝,也就是说它只拷贝对下的第一层的属性值。如果这个值是一个对象类型,那么 Object.assign() 不会对该对象进行深拷贝,也就是说,拷贝后的对象下的这个对象类型是源对象和拷贝后的对象共有的,无论谁(源对象或拷贝后对象)对这个对象下的值进行修改,另一个对象(源对象或拷贝后对象)也会共享这个改变。看下面的例子更清晰的表达:

var target = {};
var source = {a: 1, b: {c: 2, d: 3}};
Object.assign(target, source);
target.a = 5;
target.b.c = 9;
console.log(target) // {a: 5, b: {c: 9, d: 3}}
console.log(source) // {a: 1, b: {c: 9, d: 3}}

上面的代码中,源对象 source 是个两层的字面量对象,b 也是一个对象。使用 Object.assign() 拷贝给目标对象 target,拷贝后对 target 对象下的值进行修改,然后打印目标对象和源对象。从打印的结果可以看出,对 target 第一层的 a 进行修改时,源对象是不会改变。但是对 target 下的 b 对象下的值进行修改时,因为 b 也是一个对象,所以源对象中的值也被修改了。到这里可以看出,Object.assign() 没有对 b 进行拷贝。

如果需要深拷贝则需要,需要递归地使用去 Object.assign() 来拷贝对象。

4. 基本类型的合并

当合并的源对象是基本类型时,这些基本类型会作为最后对象上的值,而键则以数字递增,其中如果值是 null 和 undefined 时会被忽略。看如下实例:

var s1 = "abc";
var s2 = true;
var s3 = 10;
var s4 = Symbol("foo")
var obj = Object.assign({}, s1, null, s2, undefined, s3, s4);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

5. 拷贝异常时会被打断

在拷贝时如果发生异常,则拷贝会被终止,并报错,前面已经被拷贝的不会被影响可以继续使用,但后面没有被拷贝的则不能被使用。

var target = Object.defineProperty({}, "a", {
value: 1,
writable: false
});
Object.assign(target, {b: 2}, {a: 3}, {c: 4});
// Uncaught TypeError: Cannot assign to read only property 'a' of object '
console.log(target.b); // 2
console.log(target.c); // undefined

上面的代码中,定义了目标对象 target 上的属性 a 是只读的,也就是不能不被修改,在合并代码时,源对象上有 a,则报了 a 是对象上的只读属性不能被 assign 操作。从后面的打印结果可以看出,b 已经被拷贝到目标对象上了可以正常使用,但由于拷贝中发生异常,最后一个对象没有被拷贝,所以 c 的值是 undefined。

6. 小结

本章讲解了用于合并对象的方法 Object.assign() 主要有以下几点需要注意的。

  • Object.assign () 属于浅拷贝;
  • 合并对象时后面的对象会覆盖前面的对象;
  • 拷贝时发生异常,前面已拷贝的不会受到影响,异常后面的对象则不会被拷贝。